import Vue from 'vue'
import Component from 'vue-class-component'
import '../settingStyle.css'

@Component
export default class HomePageSettingClass extends Vue {
  itemLists = ['轮播', 'New Arrivals', '今日特惠', '资讯', '推荐商品', '今日特惠', '资讯', '推荐商品', '今日特惠', '资讯', '推荐商品']
  isShowList = false
  actionSheetList = []
  chooseBools = []
  wrapperHeight = 0

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  created () {
    this.wrapperHeight = document.documentElement.clientHeight - 100
    this.actionSheetList = this.copyArr(this.itemLists)
    this.createActionListDefaultData()
  }

  createActionListDefaultData () {
    for (var i = 0; i < this.actionSheetList.length; i++) {
      this.chooseBools.push(false)
    }
  }

  copyArr(arr) {
    return arr.map((e) => {
      if (typeof e === 'object') {
        return Object.assign({}, e)
      } else {
        return e
      }
    })
  }

  // 上移
  handlerSort (index) {
    let obj = this.itemLists[index]
    this.itemLists.splice(index, 1)
    if (index - 1 >= 0) {
      this.itemLists.splice(index - 1, 0, obj)
    }
  }

  // 删除
  handerDelete (index) {
    this.itemLists.splice(index, 1)
  }

  handlerClickCell (e, index) {
    e.stopPropagation()
    this.createActionListDefaultData()
    this.chooseBools.splice(index, 1, true)
    setTimeout(() => {
      this.itemLists.push(this.actionSheetList[index])
      this.isShowList = !this.isShowList
    }, 500)
  }

  createHomeItem() {
    const item = this.actionSheetList.map((value, index) => {
      return <div onClick={ (e) => this.handlerClickCell(e, index)}>
                <mt-cell title={value} >
                  <icon v-show={!this.chooseBools[index]} name='sortUnSelect' scale = '2'/>
                  <icon v-show={this.chooseBools[index]} name='sortSelect' scale = '2'/>
                </mt-cell>
             </div>
    })
    return item
  }

  createItem() {
    const item = this.itemLists.map((value, index) => {
      return <div>
        <p style='text-align:center'>{value}</p>
        <span onClick={() => { this.handlerSort(index) }}><icon name='upIcon' scale = '2'/></span>
        <dd onClick = {() => { this.handerDelete(index) }}><icon name='deleteIcon' scale = '2'/></dd>
      </div>
    })
    return item
  }

  render () {
    return (
      <div class='content'>
        <mt-header class='header' fixed title="首页设置">
          <mt-button onClick={() => { this.$router.go(-1) }} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
        </mt-header>
        <div class = 'homeSettingHeaderStyleClass'>
          <p>按顺序添加首页显示板块</p>
          <span onClick={() => { this.isShowList = !this.isShowList }}><icon name='addIcon' scale='2'/></span>
        </div>
        <div class='homeSettingStyleClass' style = {this.caculateHeight}>
          {this.createItem()}
        </div>

        <mt-popup v-model={this.isShowList} position="bottom" class="mint-popup-4">
          {this.createHomeItem()}
        </mt-popup>

      </div>
    )
  }
}
